<template>
  <!--回款-->
  <div>
    <!--导航(当切换导航时要实现页面刷新，重新进行数据查询)-->
    <!--<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" style="margin-bottom: 10px;" >
      <el-menu-item index="1">全部</el-menu-item>
      <el-menu-item index="2">回款</el-menu-item>
      <el-menu-item index="3">退款</el-menu-item>
    </el-menu>-->
    <!--全部-->
    <div>
      <span style="padding: 0 10px"><i class="font-14 el-icon-s-open"></i></span>
      <el-select v-model="filterValue" @change="initData(currPage, pageSize,filterValue,vagueValue,content)" placeholder="全部数据" style="width: 120px">
        <el-option-group v-for="group in filterOptions" :key="group.label" :label="group.label">
          <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item">
          </el-option>
        </el-option-group>
      </el-select>
      <span style="padding: 0 10px 0 30px"><i class="fn el-icon-message-solid"></i></span>
      <el-input v-model="content" clearable placeholder="请输入内容" clearable style="width: 150px"></el-input>
      <el-select v-model="vagueValue" @change="initData(currPage, pageSize,filterValue,vagueValue,content)" placeholder="客户名称" style="width: 120px">
        <el-option v-for="item in vagueOptions" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-button @click="initData(currPage, pageSize,filterValue,vagueValue,content)" icon="el-icon-search" size="small" circle></el-button>
    </div>
    <!--新建回款记录-->
    <div style="margin-top: 15px">
      <div class="col-sm-6 text-left">
        <span set-lan="html:回款记录">回款记录表</span>
        <small class="text-muted font-13">共{{totalSize}}条</small>
      </div>
      <div class="col-sm-6 text-right">
        <el-button type="text" @click="dialogFormVisible = true">
          <el-button size="small" icon="el-icon-circle-plus-outline">新建</el-button>
        </el-button>
      </div>
      <!--回款记录dialog-->
      <el-dialog title="回款记录" :visible.sync="dialogFormVisible" width="60%"  @open="openDialog" @close='closeDialog' style="color: #333333"  >
        <el-form :model="collectionrecords" label-width="100px" ref="rec" :rules="rules" >
          <hr style="margin-bottom: 15px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="对应客户:" style="width: 830px" prop="customerByCustomerId.customerName">
                <el-input :disabled="true" v-model="collectionrecords.customerByCustomerId.customerName"></el-input>
              </el-form-item>
              <div class="form-inline" v-show="isCustomer">
                <el-input v-model="customerValue" clearable @input="findCustomer" size="medium" placeholder="拼音.字母.关键字" style="width: 150px"></el-input>
                <el-button @click="findCustomer" size="medium" icon="el-icon-search"></el-button>
                <el-popover placement="top" v-model="visible">
                  <div style="margin-bottom: 10px">
                    <span>查询条件:{{customerValue}}</span>
                    <span @click="closeEmp" class="cursor" style="float: right"><i class="el-icon-error"></i></span>
                  </div>
                  <ul class="cu-ul" v-if="customerList2 !== ''">
                    <li @click="choiceCustomer2(item)" v-for="item in customerList2">{{item.customerName}}</li>
                  </ul>
                  <div style="margin: 5px 0;text-align: center" v-if="customerList2 == ''">
                    <i class="el-icon-warning-outline"/>没有符合条件的客户！
                  </div>
                </el-popover>
                <el-tooltip class="item" effect="dark" content="浏览选择客户" placement="bottom">
                  <el-button @click="innerVisible(cusCurrPage,cusPageSize)" size="medium" icon="el-icon-s-operation"></el-button>
                </el-tooltip>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="合同订单:" prop="contractByContractId">
                <!--key绑定主键，要和select的value-key属性对应，引用字段名要一致，label用于显示内容，value值用来包含对象，用来提交-->
                <el-select v-model="collectionrecords.contractByContractId" value-key="contractId" placeholder="未选" style="width: 730px">
                  <el-option v-for="item in contractList" :key="item.contractId" :label="item.contractTheme" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="期次:" prop="collectionrecordPeriods">
                <el-select v-model="collectionrecords.collectionrecordPeriods" placeholder="未选"  style="width: 290px">
                  <el-option
                    v-for="item in periods"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="回款日期:" prop="collectionrecordDate">
                <el-date-picker  type="date" placeholder="选择日期" style="width: 290px" v-model="collectionrecords.collectionrecordDate"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="回款金额:" style="width: 395px" prop="collectionrecordAmount">
                <el-input v-model="collectionrecords.collectionrecordAmount"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="付款方式:">
                <el-select placeholder="未选"  style="width: 290px" v-model="collectionrecords.collectionrecordPaystyle">
                  <el-option
                    v-for="item in payStyleOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="所有者:" style="width: 370px">
                <el-input style="width: 296px" :disabled="true" v-model="collectionrecords.employeeByEmpId.empName">
                 <!-- <el-button slot="append" icon="el-icon-search"></el-button>-->
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="分类:">
                <el-select placeholder="未选"  style="width: 290px" v-model="collectionrecords.collectionrecordSort">
                  <el-option
                    v-for="item in sortOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="对应退货单:" style="width: 830px">
                <el-input :disabled="true" v-model="collectionrecords.collectionrecordReturnlist"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" style="margin-left: 30px;margin-bottom: 20px">
              <span style="margin-right: 10px">已开发票:</span>
              <el-radio-group v-model="radio">
                <el-radio :label="1">否</el-radio>
                <el-radio :label="2">是</el-radio>
                <el-radio :label="3">无需开票</el-radio>
              </el-radio-group>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注:" style="width: 830px">
                <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="collectionrecords.collectionrecordNote"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" :offset="6">
              <el-form-item>
                <el-button type="primary" @click="addCollectionRecords">保存</el-button>
                <el-button @click="dialogFormVisible = false">取消</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!--内层dialog-->
        <el-dialog width="30%" title="全部客户" :visible.sync="innerDialog" append-to-body>
          <!--选择客户-->
          <el-table :data="customerList" style="width: 100%">
            <el-table-column prop="customerId" label="客户编号" >
            </el-table-column>
            <el-table-column prop="customerName" label="客户名" >
            </el-table-column>
            <el-table-column label="请选择" >
              <template slot-scope="scope">
                <el-button size="mini" @click="choiceCustomer(scope.row)" icon="el-icon-check" type="primary" circle style="margin-left: 10px"></el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row style="margin-top:10px">
            <el-col :span="16">
              <el-pagination layout="prev, pager, next, jumper" :total="cusTotalSize" @current-change="cusChangePage"
                             :current-page.sync="cusCurrPage" :page-size="cusPageSize"></el-pagination>
            </el-col>
          </el-row>
        </el-dialog>
      </el-dialog>
    </div>
    <el-table ref="multipleTable" :data="receivableList" tooltip-effect="dark"
              style="width: 100%"  @selection-change="handleSelectionChange" border>
      <el-table-column type="selection" ></el-table-column>
      <el-table-column prop="collectionrecordId" label="ID" wsortable></el-table-column>
      <el-table-column prop="collectionrecordAmount" label="金额" >
       <!-- <template slot-scope="scope">
          <span style="color: #333333">
            <i class="el-icon-caret-right" @click="handleEdit(scope.row)" style="cursor: pointer"></i>
            <span>{{scope.row.amount}}</span>
          </span>
        </template>-->
      </el-table-column>
      <el-table-column prop="collectionrecordPeriods" label="期次" ></el-table-column>
      <el-table-column prop="collectionrecordDate" label="日期" ></el-table-column>
      <el-table-column prop="collectionrecordInvoiced" label="已开发票" >
        <template slot-scope="scope">
          <span v-if="scope.row.collectionrecordInvoiced == 1">{{ztOptions[0].label}}</span>
          <span v-if="scope.row.collectionrecordInvoiced == 2">{{ztOptions[1].label}}</span>
          <span v-if="scope.row.collectionrecordInvoiced == 3">{{ztOptions[2].label}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="collectionrecordSort" label="分类" >
        <template slot-scope="scope">
          <span v-if="scope.row.collectionrecordSort == 1">{{sortOptions[0].label}}</span>
          <span v-if="scope.row.collectionrecordSort == 2">{{sortOptions[1].label}}</span>
          <span v-if="scope.row.collectionrecordSort == 3">{{sortOptions[2].label}}</span>
          <span v-if="scope.row.collectionrecordSort == 4">{{sortOptions[3].label}}</span>
          <span v-if="scope.row.collectionrecordSort == 5">{{sortOptions[4].label}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="customerByCustomerId.customerName" label="客户" >
        <template slot-scope="scope">
          <div style="color: #333333">
            <span>{{scope.row.customerByCustomerId.customerName}}</span>
            <el-tooltip class="item" effect="dark" content="打开详细页面" placement="bottom">
              <router-link :to="{path:'/CustomerView',query: {customerId: scope.row.customerByCustomerId.customerId}}">
                  <span style="color: #333333">
                    <i class="el-icon-s-opportunity"></i>
                  </span>
              </router-link>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="contractByContractId.contractTheme" label="合同订单" >
        <template slot-scope="scope">
          <div style="color: #333333">
            <span>{{scope.row.contractByContractId.contractTheme}}</span>
            <el-tooltip class="item" effect="dark" content="打开详细页面" placement="bottom">
              <router-link :to="{path:'/ContractView',query: {contractId: scope.row.contractByContractId.contractId}}">
                  <span style="color: #333333">
                    <i class="el-icon-s-opportunity"></i>
                  </span>
              </router-link>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="employeeByEmpId.empName" label="所有者" ></el-table-column>
      <el-table-column prop="" label="操作" width="135px">
        <template slot-scope="scope">
         <!-- <router-link :to="'/receivablerecordsview'">
            <el-tooltip class="item" effect="dark" content="进入视图" placement="bottom">
              <el-button size="mini" icon="el-icon-tickets" type="success" circle></el-button>
            </el-tooltip>
          </router-link>-->
          <el-tooltip class="item" effect="dark" content="编辑" placement="bottom">
            <el-button size="mini" @click="handleEdit(scope.row)" icon="el-icon-edit" type="primary" circle style="margin-left: 10px"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
            <el-button size="mini" @click="handleDelete(scope.row)" icon="el-icon-delete" type="danger" circle></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row style="margin-top:10px">
      <!--<el-col :span="8">
        <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
          <el-button style="padding: 12px 12px" icon="el-icon-delete" @click="handleDeleteMany" type="danger"></el-button>
        </el-tooltip>
      </el-col>
      <el-col :span="24">
        <el-pagination layout="prev, pager, next, jumper" :total="totalSize" @current-change="changePage"
                       :current-page.sync="currPage" :page-size="pageSize" style="margin-left:500px"></el-pagination>
      </el-col>-->
      <el-col :span="8">
        <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
          <el-button style="padding: 12px 12px" icon="el-icon-delete" @click="handleDeleteMany" type="danger"></el-button>
        </el-tooltip>
      </el-col>
      <el-col :span="16">
        <el-pagination layout="sizes,prev,pager, next, jumper" :total="totalSize" @current-change="changePage"
                       :current-page.sync="currPage" :page-size="pageSize" :page-sizes="pageSizes" @size-change="changeSize"></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>export default {
  data () {
    return {
      emp:{},
      pageSize: 10, // 分页页大小
      pageSizes:[10,20,30],//页大小数组
      receivableList:[],
      contractList:[],
      customerList: [], // 员工客户名称
      contactList: [], // 员工联系人集合
      pageSize: 5, // 分页页大小
      currPage: 1, // 当前页码，默认为1
      totalSize: 0, // 总记录数
      cusPageSize: 5, // 分页页大小
      cusCurrPage: 1, // 当前页码，默认为1
      cusTotalSize: 0, // 总记录数
      isCustomer: true, // 客户搜索显示
      innerDialog: false,// 内层dialog客户
      innerDialogEmp: false,// 内层dialog员工
      content: '',// input内容
      customerValue:'',// 模糊查询客户
      customerList2:[],// 模糊查询结果
      visible: false,// 模糊搜索结果
      //导航搜索
      activeIndex: '1',
      //头部搜索框
      vagueOptions: [{
        value: 1,
        label: '客户名称'
      }, {
        value: 2,
        label: '回款日期'
      }],
      vagueValue: 1,
      jhValue: '',
      filterValue: {value:0,label: '全部数据',num:0},
      /*下拉框条件查询*/
      filterOptions: [{
        label: '',
        options: [{
          value: 0,
          label: '全部数据',
          num:0
        }]
      }, {
        label: '付款方式',
        options: [{
          value: 1,
          label: '微信',
          num:1
        }, {
          value: 2,
          label: '支付宝',
          num:2
        }, {
          value: 3,
          label: '现金',
          num:3
        }, {
          value: 4,
          label: '网上银行',
          num:4
        }, {
          value: 5,
          label: '其他',
          num:5
        }]
      }, {
        label: '分类',
        options: [{
          value: 6,
          label: '新客户付款',
          num:1
        }, {
          value: 7,
          label: '老客户付款',
          num:2
        }, {
          value: 8,
          label: '押金',
          num:3
        }, {
          value: 9,
          label: '贷款',
          num:4
        }, {
          value: 10,
          label: '服务费',
          num:5
        }]
      }, {
        label: '开票',
        options: [{
          value: 11,
          label: '未开发票',
          num:1
        }, {
          value: 12,
          label: '已开发票',
          num:2
        }, {
          value: 13,
          label: '无需开票',
          num:3
        }]
      }, {
        label: '退款',
        options: [{
          value: 14,
          label: '只列退款',
          num:1
        }, {
          value: 15,
          label: '不列退款',
          num:2
        }]
      }],
      allValue:'',
      //是否开票
      ztOptions: [{
        value: 1,
        label: '未开发票'
      }, {
        value: 2,
        label: '已开发票'
      }, {
        value: 3,
        label: '无需开票'
      }],
      //弹出框的期次
      periods: [{
        value: 1,
        label: '1'
      }, {
        value: 2,
        label: '2'
      }, {
        value: 3,
        label: '3'
      }, {
        value: 4,
        label: '4'
      }, {
        value: '选项5',
        label: '5'
      }, {
        value: 6,
        label: '6'
      }],
      //支付方式
      payStyleOptions: [{
        value: 1,
        label: '微信'
      }, {
        value: 2,
        label: '支付宝'
      }, {
        value: 3,
        label: '现金'
      }, {
        value: 4,
        label: '网上银行'
      }, {
        value: 5,
        label: '其他'
      }],
      //分类
      sortOptions: [{
        value: 1,
        label: '新客户付款'
      }, {
        value: 2,
        label: '老客户付款'
      }, {
        value: 3,
        label: '押金'
      }, {
        value: 4,
        label: '贷款'
      }, {
        value: 5,
        label: '服务费'
      }],
      //分类下拉框值
      sortvalue:'',
      //付款方式下拉框值
      payvalue:'',
      periodvalue: '',
      radio: 1,
      value:'',
      dialogFormVisible: false,
      collectionrecords: {
        collectionrecordId:0,
        collectionrecordPeriods:'',
        collectionrecordDate:'',
        collectionrecordAmount:'0.0',
        collectionrecordPaystyle:'',
        collectionrecordSort:'',
        collectionrecordInvoiced:0,
        collectionrecordNote:'',
        collectionrecordCustomerName:'',
        collectionrecordEmpName:'',
        collectionrecordReturnlist:'',
        contractByContractId:'',//合同
        employeeByEmpId:'',//员工
        customerByCustomerId:''//客户
      },
      // 客户签约人(要从数据库里面查找)
      restaurants: [],
      state: '',
      timeout:  null,

      rules: {
        collectionrecordAmount: [
          { required: true, message: '请填写', trigger: 'change' },
        ],
        collectionrecordPeriods:[
          { required: true, message: '必选', trigger: 'blur' }
        ],
        collectionrecordDate: [
          { required: true, message: '必选',trigger: 'blur'}
        ],
        'customerByCustomerId.customerName': [
          { required: true, message: '请选择客户', trigger: 'blur' }
        ],
        'contractByContractId':[
          { required: true, message: '请选择合同', trigger: 'blur' }
        ]
      },
      mulSelection: []
    }
  },
  methods: {
    // 查询当前员工
    loginEmp(){
      this.$axios.get('http://localhost:8088/emp')
        .then(v => {
          this.emp = v.data
        })
        .catch(function (v) {})
    },
    initData (currPage, pageSize,filter,vague,content) {
      this.$axios.get('http://localhost:8088/emp-collectionrecord-list', {
        params: {
          page: currPage,
          size: pageSize,
          value:filter.value,
          num:filter.num,
          vague:vague,
          content:content
        }
      })
        .then(v => {
          this.receivableList = v.data.rows
          this.totalSize = v.data.total
        })
        .catch(function (v) {})
    },
    //查询客户所有合同订单
    contractData(cusId) {
      this.$axios.get('http://localhost:8088/cus-contract-list-all', {
        params: {
          cusId: cusId
        }
      })
        .then(v => {
          this.contractList = v.data
        })
        .catch(function (v) {
        })
    },
    // 选择联系人(查询联系人)
    choiceContact(customerId){
      this.$axios.get('http://localhost:8088/contact-list', {
        params: {
          customerId : customerId
        }
      })
        .then(v => {
          this.contactList = v.data
        })
        .catch(function (v) {})
    },
    // 回款记录表格分页
    changePage (val) {
      // val就是当前页码
    /*  this.initData(val, this.pageSize)*/
      this.initData(val,this.pageSize,this.filterValue,this.vagueValue,this.content)
    },
    //改变页大小
    changeSize(val){
      this.pageSize = val
      this.currPage = 1
      this.initData(this.currPage,this.pageSize,this.filterValue,this.vagueValue,this.content)
    },
    // 分类查询
    findReceivable(val){
      if(val.value == 0){
        this.initData(this.currPage, this.pageSize)
      }
      if (val.parentLabel == '付款方式'){
        this.$axios.get('http://localhost:8088/emp-collectionrecord-paystyle-list', {
          params: {
            page: this.currPage,
            size: this.pageSize,
            collectionrecordPaystyle: val.value
          }
        })
          .then(v => {
            console.log(v.data.rows)
            this.receivableList = v.data.rows
            this.totalSize = v.data.total
          })
          .catch(function (v) {})
      }
      if (val.parentLabel == '分类'){
        this.$axios.get('http://localhost:8088/emp-collectionrecord-sort-list', {
          params: {
            page: this.currPage,
            size: this.pageSize,
            collectionrecordSort: val.value
          }
        })
          .then(v => {
            console.log(v.data.rows)
            this.receivableList = v.data.rows
            this.totalSize = v.data.total
          })
          .catch(function (v) {})
      }
      if (val.parentLabel == '开票'){
        this.$axios.get('http://localhost:8088/emp-collectionrecord-invoice-list', {
          params: {
            page: this.currPage,
            size: this.pageSize,
            collectionrecordInvoiced: val.value
          }
        })
          .then(v => {
            console.log(v.data.rows)
            this.receivableList = v.data.rows
            this.totalSize = v.data.total
          })
          .catch(function (v) {})
      }

      if (val.parentLabel == '退款'){
        this.$axios.get('http://localhost:8088/emp-collectionrecord-return-list', {
          params: {
            page: this.currPage,
            size: this.pageSize,
            collectionrecordBack: val.value
          }
        })
          .then(v => {
            console.log(v.data.rows)
            this.receivableList = v.data.rows
            this.totalSize = v.data.total
          })
          .catch(function (v) {})
      }
    },
    //查询回款日期或客户
    findDateOrClient(){
      if (this.content == ''){
        this.initData(this.currPage, this.pageSize)
      }
      if (this.jhValue == 2){
        this.$axios.get('http://localhost:8088/emp-collectionrecord-date-list', {
          params: {
            page: this.currPage,
            size: this.pageSize,
            collectionrecordDate: this.content
          }
        })
          .then(v => {
            console.log(v.data.rows)
            this.receivableList = v.data.rows
            this.totalSize = v.data.total
          })
          .catch(function (v) {})
      }else {
        this.$axios.get('http://localhost:8088/emp-collectionrecord-customerName-list', {
          params: {
            page: this.currPage,
            size: this.pageSize,
            customerName: this.content
          }
        })
          .then(v => {
            console.log(v.data.rows)
            this.receivableList = v.data.rows
            this.totalSize = v.data.total
          })
          .catch(function (v) {})
      }
    },
    //修改数据回显
    handleEdit(val) {
      this.dialogFormVisible = true
      this.radio = val.collectionrecordInvoiced
      this.collectionrecords.collectionrecordId = val.collectionrecordId
      this.collectionrecords.collectionrecordPeriods = val.collectionrecordPeriods
      this.collectionrecords.collectionrecordDate = val.collectionrecordDate
      this.collectionrecords.collectionrecordAmount = val.collectionrecordAmount
      this.collectionrecords.collectionrecordPaystyle = val.collectionrecordPaystyle
      this.collectionrecords.collectionrecordSort = val.collectionrecordSort
      this.collectionrecords.collectionrecordInvoiced = val.collectionrecordInvoiced
      this.collectionrecords.collectionrecordNote = val.collectionrecordNote
      //this.collectionrecords.collectionrecordCustomerName = val.collectionrecordCustomerName
      //this.collectionrecords.collectionrecordEmpName = val.collectionrecordEmpName
      this.collectionrecords.collectionrecordReturnlist = val.collectionrecordReturnlist
      this.collectionrecords.contractByContractId = val.contractByContractId
      this.collectionrecords.customerByCustomerId = val.customerByCustomerId
      this.collectionrecords.employeeByEmpId = val.employeeByEmpId
      this.choiceContact(val.customerByCustomerId.customerId) // 根据客户名查询联系人集合
      this.contractData(val.customerByCustomerId.customerId)
      this.isCustomer = false
    },
    //新增
    addCollectionRecords(){
      //开票状态
      this.collectionrecords.collectionrecordInvoiced = this.radio
      this.$refs.rec.validate((valid) => {
        if (valid) {
          this.$axios.post('http://localhost:8088/save-collectionrecord',
            {
              collectionrecordId:this.collectionrecords.collectionrecordId,
              collectionrecordPeriods:this.collectionrecords.collectionrecordPeriods,
              collectionrecordDate:this.collectionrecords.collectionrecordDate,
              collectionrecordAmount:this.collectionrecords.collectionrecordAmount,
              collectionrecordPaystyle:this.collectionrecords.collectionrecordPaystyle,
              collectionrecordSort:this.collectionrecords.collectionrecordSort,
              collectionrecordInvoiced:this.collectionrecords.collectionrecordInvoiced,
              collectionrecordNote:this.collectionrecords.collectionrecordNote,
              //collectionrecordCustomerName:this.collectionrecords.collectionrecordCustomerName,
              //collectionrecordEmpName:this.collectionrecords.collectionrecordEmpName,
              collectionrecordReturnlist:this.collectionrecords.collectionrecordReturnlist,
              contractByContractId:this.collectionrecords.contractByContractId,
              customerByCustomerId:this.collectionrecords.customerByCustomerId,
              employeeByEmpId:this.collectionrecords.employeeByEmpId,
            })
            .then(v => {
              // 1、刷新数据
              this.initData(this.currPage,this.pageSize,this.filterValue,this.vagueValue,this.content)
              // 2、关闭弹框
              this.dialogFormVisible = false
              this.$message({
                message: '已保存',
                type: 'success'
              });
            })
            .catch(function (v) {})
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 打开dialog事件
    openDialog () {
      this.collectionrecords.employeeByEmpId = this.emp
    },
    // 关闭dialog事件
    closeDialog () {
      this.$refs.rec.resetFields()
      this.collectionrecords = {
        collectionrecordId:0,
        collectionrecordPeriods:0,
        collectionrecordDate:'',
        collectionrecordAmount:0.00,
        collectionrecordPaystyle:0,
        collectionrecordSort:0,
        collectionrecordInvoiced:0,
        collectionrecordNote:'',
        collectionrecordCustomerName:'',
        collectionrecordEmpName:'',
        collectionrecordReturnlist:'',
        customerByCustomerId:{},//客户
        contractByContractId:'',//合同订单
        employeeByEmpId: ''
      }
      this.receivableList = []
      this.isCustomer = true
      this.contactList = []
      this.contractList = []
    },


    // 导航搜索
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    openView (val) {
      this.$axios.post('http://localhost:8080/#/contractview')
    },
    // 打开内层dialog
    innerVisible (cusCurrPage,cusPageSize) {
      this.$axios.get('http://localhost:8088/emp-customer-list', {
        params: {
          page: cusCurrPage,
          size: cusPageSize,
        }
      })
        .then(v => {
          this.customerList = v.data.rows
          this.cusTotalSize = v.data.total
        })
        .catch(function (v) {})
      this.innerDialog = true
    },
    //查询客户分页
    cusChangePage (val) {
      // val就是当前页码
      this.innerVisible(val, this.cusPageSize)
    },
    // 选择客户
    choiceCustomer(val){
      this.collectionrecords.customerByCustomerId = val
      console.log(this.collectionrecords.customerByCustomerId)
      this.choiceContact(val.customerId)
      this.contractData(val.customerId)
      this.innerDialog = false;
    },
    // 模糊查询客户
    findCustomer(){
      if (this.customerValue != ''){
        this.visible = true
        this.$axios.get('http://localhost:8088/emp-fuzzy-customer-list', {
          params: {
            customerName: this.customerValue
          }
        })
          .then(v => {
            this.customerList2 = v.data
          })
          .catch(function (v) {})
      }else {
        this.visible = false
      }
    },
    // 模糊选择客户
    choiceCustomer2(val){
      console.log(val)
      this.collectionrecords.customerByCustomerId = val
      this.choiceContact(val.customerId)
      this.contractData(val.customerId)
      this.visible = false
    },
    // 失去焦点关闭模糊搜索框
    closeEmp(){
      this.visible = false
      this.customerValue = ''
    },
    // 选择员工
    choiceEmp(val){
      this.collectionrecords.employeeByEmpId = val
      console.log(this.collectionrecords.customerByCustomerId)
      this.$axios.get('http://localhost:8088/contact-list', {
        params: {
          customerId : val.customerId
        }
      })
        .then(v => {
          this.contactList = v.data
        })
        .catch(function (v) {})
      this.innerDialog = false;
    },
    // 删除提示
    handleDelete(val) {
      this.$confirm('此操作将永久删除该回款记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteCollectionRecords(val.collectionrecordId)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 批量删除提示
    handleDeleteMany () {
      this.$confirm('此操作将永久删除勾选回款记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteAll()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 获取批量删除对象集合
    handleSelectionChange (val) {
      this.mulSelection = val
    },
    // 删除axios
    deleteCollectionRecords(collectionrecordId) {
      this.$axios.post('http://localhost:8088/delete-collectionrecord', this.qs.stringify({collectionrecordId: collectionrecordId}))
        .then(v => {
          // 1、刷新数据
          this.initData(this.currPage,this.pageSize,this.filterValue,this.vagueValue,this.content)
        })
        .catch(function (v) {
        })
    },
    // 删除所有
    deleteAll() {
      this.mulSelection.forEach(row => {
        this.deleteCollectionRecords(row.collectionrecordId)
      })
    },
    //客户签约人与我方签约人
    loadAll() {
      return [
        { "value": "陈浩南", "address": "crm工大小组" },
        { "value": "张三疯", "address": "crm工大小组" }
      ];
    },
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 3000 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSelect(item) {
      console.log(item);
    }
  },
  created:function(){
    this.loginEmp()
    this.initData(this.currPage,this.pageSize,this.filterValue,this.vagueValue,this.content)
  },
  mounted() {
    this.restaurants = this.loadAll();
  }
}
</script>

<style>
  .font-14{
    font-size: 14px
  }
  .col-sm-6 {
    width: 50%;
    position: relative;
    min-height: 1px;

  }
  .text-muted {
    color: #98a6ad;
  }
  .font-13 {
    font-size: 13px !important;
  }
  .text-left{
    text-align: left;
    float: left;
  }
  .text-right {
    text-align: right;
    float: right;
  }
  .form-inline{
    position: relative;
    top: -15px;
    left: 100px;
  }
  .font-14-bold{
    color: #000000;
    font-weight: bold;
  }
</style>
